<template>
	<view class="main">
		<view class="bg-box"></view>
			<header-vue :back="true" title="兑换成功"  bgColor="transparent" ></header-vue>
			<view class="success-img">
				<image :src="IMAGE_URL + '/static/images/success-img.png' "></image>
			</view>
			<view class="font36 text-333">兑换成功</view>
			
			<view class="btn-box">
				<view class="popup-btn cancel" @click="">返回首页</view>
				<view class="popup-btn confirm" @click="">查看订单</view>
			</view>
		</view>
	</view>
		
</template>

<script>
		import headerVue from '@/components/header.vue'
		import appConfig from '@/config/app.js'
		export default{
			data(){
				return{
					IMAGE_URL: appConfig.IMAGE_URL,
				}
			},
			components:{
					headerVue,
			},
			methods:{}
		}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		
	}
	.bg-box {
		height: 400rpx;
		background: linear-gradient(to bottom, #F3FAFF 0%, rgba(243, 250, 255, 0) 100%) !important;
		position: absolute;
		width: 100vw;
		left: 0;
		z-index: 0;
	}
	.success-img{
		width: 200rpx;
		height: 200rpx;
		margin:150rpx auto 20rpx;
		image{
			width: 200rpx;
			height: 200rpx;
		}
	}
	.text-333{
		color:$uni-text-color;
		margin-bottom: 120rpx;
		text-align: center;
	}
	.btn-box{
		padding: 96rpx;
		display: flex;
		justify-content: space-between;
		
		box-sizing: border-box;
		.popup-btn{
			width: 260rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80upx;
			border-radius: 100rpx;
			color:#ffffff;
			font-size: 32rpx;
		
		}
		.confirm{
			background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
		
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7,133,207,0.3);
		}
		.cancel{
			background: linear-gradient( 90deg, #DF9824 0%, #F4B042 100%);
			box-shadow: 0px 6rpx 12rpx 0px rgba(223,152,36,0.3);
		}
	}
</style>